<!DOCTYPE html>
<html>
<head>
  {include file="common/meta" /}
</head>
<body>
{include file="common/header" /}
<div class="container-fluid yzkc kcCon">
  <div class="content row  courseCon">
    <div class="titleBox row">
      课程支付
    </div>
    <div class="row courseInfo">
      <div class="rightCon row" style="float: left;width: 80%">
        <ul class="courseCard row">
          <li class="row item" style="width: 35%">
            <div class="row text" style="height: 200px">
              <img src="{:cdnurl($detail.image)}">
              <h4>{$detail.title}</h4>
            </div>
          </li>
          <li class="row item" style="width: 55%">
            <div class="row">
              <h2>{$detail.title} </h2>
              <div style="float: right">
                <!--                                <label for="" style="font-size: 20px;">价格：</label>-->

              </div>

              <ul style="padding: 5px;">
                {volist name="detail.pro_json_list" id="vp" key="kp"}
                <li style="padding: 5px;">
                  <span class="label label-warning" style="font-size: 15px;"> {$vp}</span>
                </li>
                {/volist}
              </ul>
            </div>
          </li>
        </ul>
        <span style="font-size: 25px;color: red;float: right;">支付金额：￥{$detail.price}</span>
      </div>
    </div>
  </div>
  <div class="content row  courseCon">
    <div class="titleBox row">
      支付码
    </div>
    <div class="row courseInfo">
      <img src="{$result.code_url}" width="300px" alt="">
    </div>
  </div>
</div>
<div id="zhifbsubmit" style="display:none;">
  <form action="{:url('course/pay');}" method="post">
    <input type="hidden" name="code" value="alipay">
    <input type="hidden" name="cid" value="{$detail.id}">
    <input type="hidden" name="title" value="{$detail.title}">
    <input type="hidden" name="price" value="{$detail.price}">
    <input type="submit" value="立即支付"  style="display: none" id="zhifbs" class="payment-box-submit">
  </form>
</div>

<div id="weixinsubmit" style="display:none;">
  <form action="{:url('course/pay');}" method="post">
    <input type="hidden" name="code" value="wechat">
    <input type="hidden" name="cid" value="{$detail.id}">
    <input type="hidden" name="title" value="{$detail.title}">
    <input type="hidden" name="price" value="{$detail.price}">
    <input type="submit" value="立即支付" style="display: none" id="weixins" class="payment-box-submit">
  </form>
</div>
<style>
  .courseInfo{
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .pay-item{margin-bottom:30px;margin-top: 30px;}
  .pay-item li{padding:10px;border:1px solid #ccc;margin-right:30px;float:left;width:205px;}
  .pay-item li img{display:block;height:43px;display:block;margin:0 auto}
  .pay-item li.active{border:1px solid #f4a600;}
  .pay-bankbox{display:block;position:relative;border:1px solid #f4a600;padding:45px 25px 45px 290px;font-size:16px;line-height:24px;}
  .pay-bankbox .bank-zs{position:absolute;left:40px;top:50%;margin-top:-40px;}
  .pay-bankbox p{color:#333;margin-bottom:10px;}
  .pay-bankbox p.color-red{color:red}
</style>
{include file="common/footer" /}
{include file="common/script" /}
<script>
  $(function () {
    $(".pay-item li").click(function () {
      $(this).addClass("active").siblings("li").removeClass("active")
    })
  })
  $(document).ready(function () {
    $('#zhifb').click(function () {
      $('#zhifbsubmit').show();
      $('#zhifb').addClass('payment-box-hover');
      $('#weixinsubmit').hide();
      $('#weixin').removeClass('payment-box-hover');
      $('#unionsubmit').hide();
      $('#union').removeClass('payment-box-hover');
      $('#zhifbs').click();
    });
    $('#weixin').click(function () {
      $('#zhifbsubmit').hide();
      $('#weixin').addClass('payment-box-hover');
      $('#weixinsubmit').show();
      $('#zhifb').removeClass('payment-box-hover');
      $('#unionsubmit').hide();
      $('#union').removeClass('payment-box-hover');
      $('#weixins').click();
    });
  });
</script>
</body>
</html>